<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="shortcut icon" href="favicon.ico" />
		<link rel="stylesheet" type="text/css" href="sass/css/register.css" />
		<link rel="stylesheet" type="text/css" href="sass/css/common.css" />
	</head>

	<body>
		<div class="loginHead">
			<div class="loginBar">
				<div class="loginBarInner">
					<div class="logo">
						<h1>
				     		<a href="javascript:;">
				     			<img src="loginRegisterImages/logo5.jpg" alt="" />
				     		</a>
				     	</h1>
					</div>
					<div class="ad">
						<span class="zhengban">正版好图书</span>
						<span class="liujiu">全场满69包邮</span>
						<span class="yizhe">特价书一折起</span>
					</div>

				</div>
			</div>
		</div>

		<div class="content">
			<div class="w1000">
				<div class="registerForm">
					<div class="registerTitle">
						<b>新用户注册</b>
						<span>注册即送19减5优惠券，首单成功后再返一张49减10五折以下图书优惠券</span>
						<div class="backlogin">
							已有账号?
							<a href="login.html">请登录</a>
						</div>
					</div>
					<div class="registerInputWrap">
						<div class="inputItem">
							<div class="labIptWrap">
								<div class="label">
									<span>用户账号:</span>
								</div>
								<div class="inputWrap">
									<span class="inputPad">
	    								<input type="text" name="userName" id="userName" autocomplete="off" placeholder="请输入用户名"/>
	    							</span>
								</div>
								<div class="successWrap">

								</div>
							</div>
							<div class="megTip">
								<span>5-11位字符(不包含特殊字符)</span>
							</div>
						</div>

						<div class="inputItem">
							<div class="labIptWrap">
								<div class="label">
									<span>设置密码:</span>
								</div>
								<div class="inputWrap">
									<span class="inputPad">
	    								<input type="text" name="password" id="password" autocomplete="off" placeholder="请输入密码"/>
	    							</span>
								</div>
								<div class="successWrap">

								</div>
							</div>
							<div class="megTip">
								<span>请设置6到16位的密码</span>
							</div>
						</div>

						<div class="inputItem">
							<div class="labIptWrap">
								<div class="label">
									<span>确认密码:</span>
								</div>
								<div class="inputWrap">
									<span class="inputPad">
	    								<input type="text" name="confirmPSD" id="confirmPSD" autocomplete="off" placeholder="请再次输入密码"/>
	    							</span>
								</div>
								<div class="successWrap">

								</div>
							</div>
							<div class="megTip">
								<span>请再次输入密码</span>
							</div>
						</div>

						<div class="inputItem">
							<div class="labIptWrap">
								<div class="label">
									<span>手机号码:</span>
								</div>
								<div class="inputWrap">
									<span class="inputPad">
	    								<input type="text" name="phone" id="phone" autocomplete="off" placeholder="请输入您常用的手机号码"/>
	    							</span>
								</div>
								<div class="successWrap">

								</div>
							</div>
							<div class="megTip">
								<span>请输入常用的手机号码</span>
							</div>
						</div>

						<div class="regitsterBtn">
							<a href="javascript:;">立即注册</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	     
	     <div class="footer">
	     	  <div class="registerfoot">
	     	  	   <div class="footnav">
	     	  	   	  <ul>
	     	  	   	  	 <li><a href="javascript:;">介绍本站</a></li>
	     	  	   	  	  <li><a href="javascript:;">帮助中心</a></li>
	     	  	   	  	   <li><a href="javascript:;">联系我们</a></li>
	     	  	   	  	    <li><a href="javascript:;">招聘英才</a></li>
	     	  	   	  </ul>
	     	  	   </div>
	     	  	   <div class="cert">
	     	  	      <div class="w820 clear_fix">
	     	  	      	<div class="credit_certifica">
	     	  	      		<a href="javascript:;"><img class="imgs" src="loginRegisterImages/chengxin.jpg"/></a>
	     	  	      		<a href="javascript:;"><img class="imgs"  src="loginRegisterImages/ectrust.gif"/></a>
	     	  	      	</div>
	     	  	      	<div class="licence">
	     	  	      		<p>
	     	  	      			<a href="javascript:;">京ICP备09013606号-3</a>
	     	  	      			<a href="javascript:;">京信市监发[2002]122号</a>
	     	  	      			<span>
	     	  	      				海淀公安分局备案编号：1101083394
	     	  	      			</span>
	     	  	      			
	     	  	      		</p>
	     	  	      		<p>
	     	  	      			<a href="javascript:;">营业执照</a>
	     	  	      			<a href="javascript:;">出版物经营许可证 京出发京批字第直110071</a>
	     	  	      		</p>
	     	  	      	</div>
	     	  	      </div>
	     	  	   </div>
	     	  </div>
	     </div>
	</body>
	<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function my$(str) {
			return document.getElementById(str)
		}
	</script>
	<script type="text/javascript">
		var ipt = document.querySelectorAll("input");
		var items = document.querySelectorAll(".inputItem")
		console.log(ipt)
		for(let i = 0; i < ipt.length; i++) {
			ipt[i].onfocus = function() {
				items[i].className = "inputItem focus";

			}
		}

		var username = false;
		var psd = false;
		var cfpsd = false;
		var phnum = false;

		//用户名的验证
		var userNameReg = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
		my$("userName").onblur = function() {
			if(userNameReg.test(this.value)) {
				username = true;
				//选中successWrap
				this.parentNode.parentNode.nextElementSibling.style.display = "block";
				//选中tips
				this.parentNode.parentNode.parentNode.nextElementSibling.style.display = "none";
				this.parentNode.parentNode.parentNode.nextElementSibling.innerHTML = "5-11位字符(不包含特殊字符)";
				this.parentNode.parentNode.parentNode.nextElementSibling.style.color = "#000";

				//让类名变为原来没有focus的情况
				this.parentNode.parentNode.parentNode.parentNode.className = "inputItem";
				//回到开始的颜色
				this.parentNode.parentNode.style.borderColor = "#d6d6d6";

			} else {

				username = false;
				//tip的文字变为红色
				this.parentNode.parentNode.parentNode.nextElementSibling.style.color = "#E60000";
				//改变tips的提示信息
				this.parentNode.parentNode.parentNode.nextElementSibling.innerHTML = "用户名格式错误";
				//让右边的勾消失
				this.parentNode.parentNode.nextElementSibling.style.display = "none";
				//将边框变为红色
				this.parentNode.parentNode.style.borderColor = "#e60000";
			}
			console.log(username)
			if(username == true) {
				this.parentNode.parentNode.parentNode.nextElementSibling.style.display = "none";
			} else {
				this.parentNode.parentNode.parentNode.nextElementSibling.style.display = "block";
			}
		}

		//密码的验证
		//用户名的验证
		var userpsd = /.{6,16}/;
		my$("password").onblur = function() {
			if(userpsd.test(this.value)) {
				psd = true;
				//选中successWrap
				this.parentNode.parentNode.nextElementSibling.style.display = "block";
				//选中tips
				this.parentNode.parentNode.parentNode.nextElementSibling.style.display = "none";
				//让类名变为原来没有focus的情况
				this.parentNode.parentNode.parentNode.nextElementSibling.style.color = "#000";
				//改变tips的提示信息
				this.parentNode.parentNode.parentNode.nextElementSibling.innerHTML = "请设置6-16位的密码";
				this.parentNode.parentNode.parentNode.parentNode.className = "inputItem";
				//回到开始的颜色
				this.parentNode.parentNode.style.borderColor = "#d6d6d6";

			} else {

				psd = false;
				//tip的文字变为红色
				this.parentNode.parentNode.parentNode.nextElementSibling.style.color = "#E60000";
				//改变tips的提示信息
				this.parentNode.parentNode.parentNode.nextElementSibling.innerHTML = "密码格式错误";
				//让右边的勾消失
				this.parentNode.parentNode.nextElementSibling.style.display = "none";
				//将边框变为红色
				this.parentNode.parentNode.style.borderColor = "#e60000";
			}
			console.log(psd)
			if(psd == true) {
				this.parentNode.parentNode.parentNode.nextElementSibling.style.display = "none";
			} else {
				this.parentNode.parentNode.parentNode.nextElementSibling.style.display = "block";
			}
		}

		//确认密码
		my$("confirmPSD").onblur = function() {
			var test = userpsd.test(my$("password").value);
			var res = my$("password").value == this.value ? true : false;
			console.log(res)
			if(test && userpsd.test(this.value) && res) {
				this.parentNode.parentNode.nextElementSibling.style.display = "block";
				//选中tips
				this.parentNode.parentNode.parentNode.nextElementSibling.style.display = "none";
				//让类名变为原来没有focus的情况
				this.parentNode.parentNode.parentNode.nextElementSibling.style.color = "#000";
				//改变tips的提示信息
				this.parentNode.parentNode.parentNode.nextElementSibling.innerHTML = '请再次输入密码';
				this.parentNode.parentNode.parentNode.parentNode.className = "inputItem";
				//回到开始的颜色
				this.parentNode.parentNode.style.borderColor = "#d6d6d6";
				cfpsd = true;
			} else {
				this.parentNode.parentNode.parentNode.nextElementSibling.style.color = "#E60000";
				//改变tips的提示信息
				this.parentNode.parentNode.parentNode.nextElementSibling.innerHTML = "两次密码输入不一致";
				//让右边的勾消失
				this.parentNode.parentNode.nextElementSibling.style.display = "none";
				//将边框变为红色
				this.parentNode.parentNode.style.borderColor = "#e60000";
				cfpsd = false;
			}
			console.log(cfpsd)
			if(cfpsd == true) {
				this.parentNode.parentNode.parentNode.nextElementSibling.style.display = "none";
			} else {
				this.parentNode.parentNode.parentNode.nextElementSibling.style.display = "block";
			}
		}

		//手机号码
		//手机
		var moblie = /^1(3|4|5|7|8)\d{9}$/;
		my$("phone").onblur = function() {
			if(moblie.test(this.value)) {
				this.parentNode.parentNode.nextElementSibling.style.display = "block";
				//选中tips
				this.parentNode.parentNode.parentNode.nextElementSibling.style.display = "none";
				//让类名变为原来没有focus的情况
				this.parentNode.parentNode.parentNode.nextElementSibling.style.color = "#000";
				//改变tips的提示信息
				this.parentNode.parentNode.parentNode.nextElementSibling.innerHTML = '请输入正确的手机号';
				this.parentNode.parentNode.parentNode.parentNode.className = "inputItem";
				//回到开始的颜色
				this.parentNode.parentNode.style.borderColor = "#d6d6d6";
				phnum = true;
			} else {
				this.parentNode.parentNode.parentNode.nextElementSibling.style.color = "#E60000";
				//改变tips的提示信息
				this.parentNode.parentNode.parentNode.nextElementSibling.innerHTML = "手机号码输入有误";
				//让右边的勾消失
				this.parentNode.parentNode.nextElementSibling.style.display = "none";
				//将边框变为红色
				this.parentNode.parentNode.style.borderColor = "#e60000";
				phnum = false;
			}
			console.log(phnum)
			if(phnum == true) {
				this.parentNode.parentNode.parentNode.nextElementSibling.style.display = "none";
			} else {
				this.parentNode.parentNode.parentNode.nextElementSibling.style.display = "block";
			}
		}

		//点击事件
		var btn = document.querySelector(".regitsterBtn");
		btn.onclick = function() {
			if(phnum && username && psd && cfpsd) {
                     var nameValue = my$("userName").value;
                     console.log(nameValue)
                     var psdValue = my$("password").value;
                     var url = "http://jx.xuzhixiang.top/ap/api/reg.php?username="+nameValue + "&password="+psdValue;
                 
//                    var url = "http://localhost/cnbk/zhang_hua/api/register.php?username="+nameValue + "&password="+psdValue;
                     $.ajax({
                     	type:"get",
                     	url:url,
                     	async:true,
                     	success:function(res){
                     		
                     		console.log(res)
                     		location.href="login.html";
                     	}
                     });
			}
		}
	</script>

</html>